<div *ngIf="member" class="flex-box filter-member-container">
  <div class="selected-member-container" style="min-width: 200px;">
    <mat-form-field appearance="fill">
      <mat-label>Filter</mat-label>
      <mat-select
        [value]="member.name"
        (selectionChange)="selectMember.emit($event)"
      >
        <mat-option *ngFor="let member of allMembers" [value]="member.name">
          {{ member.title }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <button
      mat-button
      mat-icon-button
      color="warn"
      style="top: -9px;"
      (click)="onRemove.emit(member.name)"
    >
      <mat-icon>delete_forever</mat-icon>
    </button>
  </div>

  <mat-form-field appearance="fill" style="min-width: 200px;">
    <mat-label>Operator</mat-label>
    <mat-select
      [value]="member.operator"
      (selectionChange)="onOperatorSelect.emit($event.value)"
    >
      <mat-option
        *ngFor="let operator of member.operators"
        [value]="operator.name"
      >
        {{ operator.title }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field appearance="fill" class="filter-input">
    <mat-label>Filter value</mat-label>
    <input
      matInput
      type="string"
      required
      [formControl]="filterValue"
    />
    <mat-error *ngIf="filterValue.invalid">Filter value is requred</mat-error>
  </mat-form-field>
</div>
